﻿<template>
  <div>
    <!-- 标题栏 -->
    <NavBar
      :title="$route.meta.title"
      :rightBtn="rightBtn"
      @handleIcon="hanldleRight"
    >
    </NavBar>
    <van-pull-refresh v-model="loading" @refresh="getDataList">
      <van-collapse v-model="activeName" accordion>
        <van-collapse-item
          v-for="(item, index) in data"
          :key="item.Id"
          :name="index"
        >
          <template #icon>
            <van-image
              v-if="item.icon"
              width="0.6rem"
              height="0.6rem"
              fit="contain"
              :src="item.icon | SvgFilter('outline')"
            />
          </template>
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <van-swipe-cell>
              <van-cell :border="false" @click.stop="handleEdit(item.Id)">
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                  <span>{{ item.Text }}</span>
                </template>
              </van-cell>
              <template #right>
                <van-button
                  v-if="hasPerm('Base_Action.Delete')"
                  square
                  text="删除"
                  type="danger"
                  style="height:100%; margin-left:1px"
                  @click="handleDelete([item.Id])"
                />
              </template>
            </van-swipe-cell>
          </template>
          <template #default>
            <div
              v-for="item in item.children"
              :key="item.Id"
              @click="handleEdit(item.Id)"
            >
              <van-swipe-cell>
                <van-cell>
                  <template #icon>
                    <van-image
                      v-if="item.icon"
                      width="0.6rem"
                      height="0.6rem"
                      fit="contain"
                      :src="item.icon | SvgFilter('outline')"
                    />
                  </template>
                  <!-- 使用 title 插槽来自定义标题 -->
                  <template #title>
                    <span>{{ item.Text }}</span>
                  </template>
                  <template #label>
                    <span>{{ item.Url }}</span>
                  </template>
                </van-cell>
                <template #right>
                  <van-button
                    v-if="hasPerm('Base_Action.Delete')"
                    square
                    text="删除"
                    type="danger"
                    style="height:100%; margin-left:1px"
                    @click="handleDelete([item.Id])"
                  />
                </template>
              </van-swipe-cell>
            </div>
          </template>
        </van-collapse-item>
      </van-collapse>
    </van-pull-refresh>

    <edit-form ref="editForm" :afterSubmit="getDataList"></edit-form>
  </div>
</template>

<script>
import {
  Base_Action_GetMenuTreeList,
  Base_Action_DeleteData
} from "@/api/Base_Manage/Base_Action";
import NavBar from "@/components/NavBar";
import EditForm from "./EditForm";
import { mapGetters } from "vuex";

export default {
  components: {
    NavBar,
    EditForm
  },
  mounted() {
    this.getDataList();
    if (this.hasPerm("Base_Action.Add")) {
      this.rightBtn.number++;
      this.rightBtn.iconName.unshift("plus");
    }
  },
  data() {
    return {
      data: [],
      pagination: {
        current: 1,
        pageSize: 10,
        showTotal: (total, range) =>
          `总数:${total} 当前:${range[0]}-${range[1]}`
      },
      filters: {},
      sorter: { field: "Id", order: "asc" },
      loading: false,
      visible: false,
      selectedRowKeys: [],
      rightBtn: {
        number: 0,
        iconName: []
      },
      activeName: 0
    };
  },
  computed: {
    ...mapGetters(["hasPerm"])
  },

  methods: {
    getDataList() {
      this.selectedRowKeys = [];

      this.loading = true;
      Base_Action_GetMenuTreeList({
        PageIndex: this.pagination.current,
        PageRows: this.pagination.pageSize,
        SortField: this.sorter.field || "Id",
        SortType: this.sorter.order,
        ...this.filters
      }).then(resJson => {
        this.loading = false;
        this.data = resJson.Data;
        const pagination = { ...this.pagination };
        pagination.total = resJson.Total;
        this.pagination = pagination;
      });
    },
    hanldleRight(item) {
      if (item === "plus") {
        this.hanldleAdd();
      }
    },
    hanldleAdd() {
      this.$refs.editForm.add();
    },
    handleEdit(id) {
      this.$refs.editForm.edit(id);
    },
    handleDelete(ids) {
      var thisObj = this;

      this.$dialog
        .confirm({
          title: "确认删除吗?"
        })
        .then(() => {
          // on confirm
          Base_Action_DeleteData(ids).then(resJson => {
            if (resJson.Success) {
              this.$toast.success("操作成功");
              this.getDataList();
            } else {
              this.$toast.fail(resJson.Msg);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
</script>

<style lang="less">
.van-dropdown-menu {
  .van-dropdown-menu__bar {
    height: 33px;
    min-width: 80px;
  }
}
.van-cell {
  padding: 0.1rem;
}
.van-image {
  margin: 0.1rem;
}
.van-collapse-item__content {
  padding: 0 0.32rem;
}
</style>
